<template>
  <view class="max_box">
    <image class="img" mode="widthFix" src="https://www.kamlung.net/images/other/maintenance.jpg"></image>
    <view class="form_box">
      <uni-forms ref="valiForm" :rules="rules" label-width="80px" label-align="right" label-position="left"
        :modelValue="testDriveaParam">
        <uni-forms-item label="姓名" required name="name">
          <uni-easyinput maxlength="10" :styles="{ borderColor: '#ffffff', color: '#333333' }" placeholder="请输入姓名"
            v-model="testDriveaParam.name" />
        </uni-forms-item>
        <uni-forms-item label="手机号码" required name="phone_no">
          <uni-easyinput type="number" maxlength="11" :styles="{ borderColor: '#ffffff', color: '#333333' }"
            v-model="testDriveaParam.phone_no" placeholder="请输入手机号码" />
        </uni-forms-item>
        <uni-forms-item label="车牌号码" required name="car_id">
          <view class="my-input-box">
            <view class="my-input" @click="plateShow = true" v-if="testDriveaParam.car_id.length">{{
              testDriveaParam.car_id }}</view>
            <view v-else class="my-input placehol" @click="plateShow = true">请输入车牌号</view>
            <view class="new" :class="{ isNew: isNew }" @click="clickNew">新能源</view>
          </view>
        </uni-forms-item>
        <uni-forms-item label="当前里程" required name="curr_kilo">
          <uni-easyinput maxlength="7" type="number" :styles="{ borderColor: '#ffffff', color: '#333333' }"
            placeholder="请输入里程数" v-model="testDriveaParam.curr_kilo" />
          <text class="kilometre">公里</text>
        </uni-forms-item>
        <uni-forms-item label="预约时间" required name="appoint_time">
          <view class="my-input-box">
            <view class="my-input" v-if="testDriveaParam.appoint_time.length" @click="openPopup">{{
              testDriveaParam.appoint_time }}</view>
            <view v-else class="my-input placehol" @click="openPopup">请选择预约时间</view>
            <uni-icons class="icon" color="#999" type="right" size="40rpx"></uni-icons>
          </view>
        </uni-forms-item>
        <picker :value="value" range-key="text" :range="areaServe" @change="serviceTypeChange">
          <uni-forms-item label="服务类型" required name="service_type">
            <view class="my-input-box">
              <view class="my-input" v-if="testDriveaParam.service_type.length">{{ showServiceType }}</view>
              <view v-else class="my-input placehol">请选择服务类型</view>
              <uni-icons class="icon" color="#999" type="right" size="40rpx"></uni-icons>
            </view>
          </uni-forms-item>
        </picker>

        <picker :value="value" range-key="value" :range="centers" @change="centersChange">
          <uni-forms-item label="体验中心" required name="company">
            <view class="my-input-box">
              <view class="my-input" v-if="testDriveaParam.company.length">{{
                testDriveaParam.company
              }}</view>
              <view v-else class="my-input placehol">请选择体验中心</view>
              <uni-icons class="icon" color="#999" type="right" size="40rpx"></uni-icons>
            </view>
          </uni-forms-item>
        </picker>
        <view class="remark_box">
          <view class="remark">备注</view>
          <uni-easyinput maxlength="150" type="textarea" :inputBorder="true" v-model="testDriveaParam.remark">
          </uni-easyinput>
        </view>
      </uni-forms>
      <view class="radio_box">
        <u-checkbox-group>
          <u-checkbox @change="change" activeColor="#de4141" :checked="checkedVal">
          </u-checkbox>
        </u-checkbox-group>
        <view>
          我已阅读、理解并同意此<text class="policy" @click="openRules">《隐私政策》</text>。</view>
      </view>
      <u-button color="#de4141" @click="submit('valiForm')">提 交</u-button>
    </view>
    <!-- 政策组件 -->
    <RulesCompany ref="rule"></RulesCompany>
    <UserLoginModal ref="openLogin"></UserLoginModal>
    <!-- 日期选择组件 -->
    <MyDateSelect @selectDate="selectDate" ref="dateSelect"></MyDateSelect>
    <!-- 车牌号键盘 -->
    <u-keyboard mode="car" :isNew="isNew" :show="plateShow" @change="valChange" :showCancel="false" @isNewFu="clickNew"
      :showConfirm="false" @backspace="backspace" @confirm="confirmCarId" @close="plateShow = false"
      :closeOnClickOverlay="true" @cancel="plateShow = false" :tips="testDriveaParam.car_id">
    </u-keyboard>
  </view>
</template>
<script>
import _ from 'lodash'
import { mapState, mapMutations } from 'vuex'
import { subscMixin } from '@/mixins/mixins.js'
import { location } from '@/mixins/location'
import plateInput from '@/components/uni-plate-input/uni-plate-input.vue'
// 保养预约规则
import { rulesMaintain } from '@/static/js/rules.js'
const dayjs = require('dayjs')
export default {
  mixins: [location, subscMixin], // 混入
  components: {
    plateInput
  },
  data() {
    return {
      isNew: false,
      plateShow: false,
      // 基础表单数据
      testDriveaParam: {
        type: 'M',
        name: '',
        phone_no: '',
        curr_kilo: '',
        car_id: '',
        appoint_time: '',
        service_type: '',
        company: '',
        company_id: '',
        remark: '',
        brand_id: '',
        uuid: ''
      },
      areaServe: [
        { value: 0, text: '维修' },
        { value: 1, text: '保养' },
        { value: 2, text: '其它' }
      ],
      curDay: dayjs()
        .add(2, 'day')
        .format('YYYY-MM-DD 09:00'),
      // 校验规则
      rules: rulesMaintain(),
      // 保养发送信息
      maintainInfo: {
        brand_id: '',
        userInfo: {
          touser: '',
          page: '/pages/CarMaintain/CarMaintain',
          template_id: '',
          data: {}
        }
      }
    }
  },
  onLoad(option) {
    let { brand ,brand_id} = this.brandInfo
    let { maintain } = this.tmplIds
    this.testDriveaParam.brand_id = brand_id
    this.maintainInfo.brand_id = brand_id
    this.maintainInfo.userInfo.template_id = maintain
    // 二维码识别
    if (option.companyId || option.scene) {
      if (option.companyId) {
        this.testDriveaParam.company_id = option.companyId
        setTimeout(() => {
          let temp = this.centers.find(item => item.id == option.companyId)
            ?.value
          this.testDriveaParam.company = temp
        }, 300)
      } else if (option.scene) {
        let param = decodeURIComponent(option.scene)
        let companyId = param.split('=')[1]
        this.testDriveaParam.company_id = companyId
        setTimeout(() => {
          let temp = this.centers.find(item => item.id == companyId)?.value
          this.testDriveaParam.company = temp
        }, 300)
      }
    }
    // 是否登录
    if (Object.keys(!this.loginInfo).length) {
      this.$refs.openLogin.isShow()
      return false
    }

    // 混合分享信息
    this.shareMixin.title = `保养维修`
    this.shareMixin.path = `/pages/CarMaintain/AppMaintain`
  },
  methods: {
    ...mapMutations(['saveCenters', 'saveLatLog']),
    setPlate(plate) {
      console.log(plate)
      if (plate.length >= 7) this.testDriveaParam.car_id = plate
      this.plateShow = false
    },
    serviceTypeChange(e) {
      this.testDriveaParam.service_type = e.detail.value
    },
    // 日期选择
    openPopup() {
      this.$refs.dateSelect.openPopup()
    },
    // 日期选择
    selectDate(e) {
      this.testDriveaParam.appoint_time = e
      // console.log(e);
    }
  },
  computed: {
    ...mapState(['tmplIds', 'loginInfo', 'brandInfo', 'carSeris', 'centers', 'latLog']),
    showServiceType() {
      let temp = this.areaServe
      let temp2 = this.testDriveaParam.service_type
      let text = temp.find(item => item.value == temp2)?.text
      // console.log(temp3)
      return text || ''
    }
  },
  watch: {
    loginInfo: {
      handler(newVal = {}) {
        // 是否已登录
        if (Object.keys(newVal).length === 0) return false
        // 是否已获取定位
        if (Object.keys(this.latLog).length === 0) {
          this.getLocation()
        }
      },
      immediate: true
    }
  }
}
</script>
<style lang="scss">
.uni-select__selector {
  z-index: 3;
}

page {
  background-color: #f5f5f5;
  padding-bottom: 5rpx;
}

// 日期选择
::v-deep .uni-calendar-item--disable .uni-calendar-item__weeks-box-text-disable {
  color: #999 !important;
}

::v-deep .uni-calendar-item__weeks-box-text {
  color: #f00 !important;
}

::v-deep .keyboard__tooltip {
  border-top: #f00 solid 1px !important;
}

// .u-keyboard__tooltip {
//   border-top: #ccc solid 1px !important;
// }
// .car-keyboard {
// 	z-index: 3;
// }
.uni-forms-item__content {
  border-bottom: 1px solid #ddd;
}
</style>
<style lang="scss" scoped>
// 备注
.remark_box {
  display: flex;
  margin-bottom: 20px;

  .remark {
    text-align: right;
    width: 80px;
    padding-right: 10px;
  }
}

::v-deep .uni-datetime-picker--btn {
  background-color: $theme-color;
}

::v-deep .uni-calendar-item--checked {
  background-color: $theme-color;
}

::v-deep .uni-calendar-item--checked {
  background-color: $theme-color !important;
}

::v-deep .uni-select__selector {
  z-index: 3;
}

// ::v-deep.is-input-border {
//   border: none;
// }

::v-deep.uni-select {
  border: none !important;
}

::v-deep.u-border-bottom {
  // border-bottom-width: 0.5px !important;
  // border-color: #dadbde !important;
  border-bottom-style: none;
}

::v-deep.uni-stat-box {
  // border-bottom: 1px solid #ddd;
}

::v-deep.uni-easyinput__content-input {
  // border-bottom: 1px solid #ddd;
}

.max_box {
  .img {
    box-shadow: $theme-shadow;
    width: 100%;
    margin-bottom: 40rpx;
  }

  .form_box {
    margin: 20rpx 30rpx 40rpx 30rpx;
    padding: 40rpx 20rpx 40rpx 20rpx;
    box-shadow: $theme-shadow;
    border-radius: 10rpx;
    background-color: #fff;
  }
}

.example {
  padding: 15px;
  background-color: #fff;
}

.segmented-control {
  margin-bottom: 15px;
}

.button-group {
  margin-top: 15px;
  display: flex;
  justify-content: space-around;
}

.form-item {
  display: flex;
  align-items: center;
}

.button {
  display: flex;
  align-items: center;
  height: 35px;
  margin-left: 10px;
}

.radio_box {
  width: 660rpx;
  margin-bottom: 30rpx;
  // text-align: center;
  display: flex;
  justify-content: center;

  .policy {
    color: $theme-color;
  }
}

.kilometre {
  position: absolute;
  right: 140rpx;
  top: 12rpx;
}

.my-input-box {
  position: relative;

  .my-input {
    padding: 0 10px;
    font-size: 14px;
    color: #666;
    // border-bottom: 1px solid #ddd;
    line-height: 35px;
    height: 35px;
  }

  .placehol {
    color: #999 !important;
    font-size: 12px !important;
  }

  .icon {
    position: absolute;
    top: 12rpx;
    right: 5rpx;
  }

  // 车牌号
  .new {
    position: absolute;
    top: 12rpx;
    font-size: 12px;
    right: 25rpx;
    border: #999 solid 1px;
    color: #999;
    padding: 0px 6rpx;
    border-radius: 8rpx;
  }

  .isNew {
    border: #19b927 solid 1px !important;
    color: #19b927 !important;
  }
}
</style>
